<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Zofund JobDispatcher</title>
    <meta name="description" content="这是一个 index 页面">
    <meta name="keywords" content="index">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="icon" type="image/png" href="assets/i/favicon.png">
    <link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png">
    <meta name="apple-mobile-web-app-title" content="Amaze UI" />
    <script src="assets/js/echarts.min.js"></script>
    <link rel="stylesheet" href="assets/css/amazeui.min.css" />
    <link rel="stylesheet" href="assets/css/amazeui.datatables.min.css" />
    <link rel="stylesheet" href="assets/css/app.css">
    <script src="assets/js/jquery.min.js"></script>
    <script>
    function preView(){
    	var quartzJob = $("#quartzJob").val();
		$.ajax({
        type: "POST",
        url: "editor/preview",
        data : quartzJob,
        contentType: "application/json",
        success: function(data){
        	 // 基于准备好的dom，初始化echarts实例
       	    var myChart = echarts.init(document.getElementById('job-preview'));
				if(null!=data&&null!=data.nodes&&null!=data.links){
					  var myData = data.nodes;
					  var myLinks = data.links;
                  // 指定图表的配置项和数据
                     option = {
                     title: {
                         textStyle:{ //设置主标题风格
                        	 color:'white'//设置主标题字体颜色
                		  },
                         text: '拓扑结构图-预览'
                     },
                     tooltip: {},
                     animationDurationUpdate: 1500,
                     animationEasingUpdate: 'quinticInOut',
                     formatter: function(params){//触发之后返回的参数，这个函数是关键
                    	 if("node"==params.dataType){
                    		 if (typeof(params.data.overTime) != undefined){
                    			 return "任务接口地址为"+ params.data.taskUrl +",设定的超时提醒时间为"+params.data.overTime+"分钟";
                    		 }
                    	   	return "任务接口地址为"+ params.data.taskUrl +",设定的超时提醒时间未设定";
                     	 }
                        if("edge"==params.dataType){
                        	return "从"+ params.data.source + "到"+ params.data.target;
                 	    }
                      },
                     series : [
                         {
                             type: 'graph',
                             layout: 'none',
                             symbolSize: 20,
                             barwidth:100,
                             roam: true,
                             label: {
                                 normal: {
                               	    show:true,                  //是否显示标签。
                               	    color:'black',
                               	    position:"inside",          //标签的位置。// 绝对的像素值[10, 10],// 相对的百分比['50%', '50%'].'top','left','right','bottom','inside','insideLeft','insideRight','insideTop','insideBottom','insideTopLeft','insideBottomLeft','insideTopRight','insideBottomRight'
                               	    offset:[0, 0],             //是否对文字进行偏移。默认不偏移。例如：[30, 40] 表示文字在横向上偏移 30，纵向上偏移 40。
                               	    formatter: function(params){
                                           return params.data.name;
                                       }       //标签内容格式器。模板变量有 {a}、{b}、{c}，分别表示系列名，数据名，数据值。
                               	}
                             },
                             edgeSymbol: ['circle', 'arrow'],
                             edgeSymbolSize: [4, 10],
                             edgeLabel: {
                                 normal: {
                                     textStyle: {
                                         fontSize: 20
                                     }
                                 }
                             },
                             data: myData,
                             links: myLinks,
                             lineStyle: {
                                 normal: {
                                     opacity: 0.9,
                                     width: 2,
                                     curveness: 0
                                 }
                             }
                         }
                     ]
                 	};
                  
                   // 使用刚指定的配置项和数据显示图表。
                   myChart.setOption(option);
					}
               }
         });
}
    </script>

</head>

<body data-type="jobeditor">
    <script src="assets/js/theme.js"></script>
    <div class="am-g tpl-g">
        <!-- 头部 -->
        <header>
            <div class="am-fl tpl-header-logo">
                <div class="am-fl tpl-header-switch-button am-icon-list"><span></span></div>
            </div>
        </header>
        <!-- 风格切换 -->
        <div class="tpl-skiner">
            <div class="tpl-skiner-toggle am-icon-cog">
            </div>
            <div class="tpl-skiner-content">
                <div class="tpl-skiner-content-title">
                    选择主题
                </div>
                <div class="tpl-skiner-content-bar">
                    <span class="skiner-color skiner-white" data-color="theme-white"></span>
                    <span class="skiner-color skiner-black" data-color="theme-black"></span>
                </div>
            </div>
        </div>
        <!-- 侧边导航栏 -->
        <div class="left-sidebar">
            <!-- 菜单 -->
            <ul class="sidebar-nav">
                <li class="sidebar-nav-link">
                    <a href="index.html">
                        <i class="am-icon-home sidebar-nav-link-logo"></i> 首页
                    </a>
                </li>
                <li class="sidebar-nav-link">
                    <a href="historyjob-list.html">
                        <i class="am-icon-table sidebar-nav-link-logo"></i>历史Job
                    </a>
                </li>
                <li class="sidebar-nav-link">
                    <a href="jobeditor.html" class="active">
                        <i class="am-icon-table sidebar-nav-link-logo"></i>job编辑器
                    </a>
                </li>
                <!-- <li class="sidebar-nav-link">
                    <a href="tables.html">
                        <i class="am-icon-table sidebar-nav-link-logo"></i> 表格
                    </a>
                </li>
                <li class="sidebar-nav-link">
                    <a href="calendar.html">
                        <i class="am-icon-calendar sidebar-nav-link-logo"></i> 日历
                    </a>
                </li>
                <li class="sidebar-nav-link">
                    <a href="form.html">
                        <i class="am-icon-wpforms sidebar-nav-link-logo"></i> 表单

                    </a>
                </li>
                <li class="sidebar-nav-link">
                    <a href="chart.html">
                        <i class="am-icon-bar-chart sidebar-nav-link-logo"></i> 图表

                    </a>
                </li>

                <li class="sidebar-nav-heading">Page<span class="sidebar-nav-heading-info"> 常用页面</span></li>
                <li class="sidebar-nav-link">
                    <a href="javascript:;" class="sidebar-nav-sub-title">
                        <i class="am-icon-table sidebar-nav-link-logo"></i> 数据列表
                        <span class="am-icon-chevron-down am-fr am-margin-right-sm sidebar-nav-sub-ico"></span>
                    </a>
                    <ul class="sidebar-nav sidebar-nav-sub">
                        <li class="sidebar-nav-link">
                            <a href="table-list.html">
                                <span class="am-icon-angle-right sidebar-nav-link-logo"></span> 文字列表
                            </a>
                        </li>

                        <li class="sidebar-nav-link">
                            <a href="table-list-img.html">
                                <span class="am-icon-angle-right sidebar-nav-link-logo"></span> 图文列表
                            </a>
                        </li>
                    </ul>
                </li>
                <li class="sidebar-nav-link">
                    <a href="sign-up.html">
                        <i class="am-icon-clone sidebar-nav-link-logo"></i> 注册
                        <span class="am-badge am-badge-secondary sidebar-nav-link-logo-ico am-round am-fr am-margin-right-sm">6</span>
                    </a>
                </li>
                <li class="sidebar-nav-link">
                    <a href="login.html">
                        <i class="am-icon-key sidebar-nav-link-logo"></i> 登录
                    </a>
                </li>
                <li class="sidebar-nav-link">
                    <a href="404.html">
                        <i class="am-icon-tv sidebar-nav-link-logo"></i> 404错误
                    </a>
                </li>
 -->
            </ul>
        </div>

        <!-- 内容区域 -->
        <div class="tpl-content-wrapper">

            <div class="container-fluid am-cf">
                <div class="row">
                    <div class="am-u-sm-12 am-u-md-12 am-u-lg-9">
                        <div class="page-header-heading"><span class="am-icon-home page-header-heading-icon"></span>Job编辑器<small>Amaze UI</small></div>
                        <p class="page-header-description">图表组件使用的是 <a href="http://echarts.baidu.com">百度图表echarts</a>。</p>
                    </div>
                </div>

            </div>


		<div class="row-content am-cf">
                <div class="row am-cf">
                    <div class="am-u-sm-12 am-u-md-6 am-u-lg-6 ">
                           <textarea class="" rows="29" id="quartzJob" style="width:100%" placeholder="请输入配置文件内容"></textarea>
                           <button type="button" onclick="javascript:preView()" class="am-btn am-btn-primary tpl-btn-bg-color-success ">预览</button>
                    </div>
                    <div class="am-u-sm-12 am-u-md-6 am-u-lg-6">
                  		   <div class="widget am-cf">
                 		       <div class="widget-body-md widget-body tpl-amendment-echarts am-fr" style="height:960" id="job-preview">
                 		       </div>
                           </div>
               		</div>
                 </div>


                </div>
               </div>
        

           
        </div>
    </div>
    </div>
    <script src="assets/js/amazeui.min.js"></script>
    <script src="assets/js/amazeui.datatables.min.js"></script>
    <script src="assets/js/dataTables.responsive.min.js"></script>
    <script src="assets/js/app.js"></script>

</body>

</html>